<!-- 示例：
<pb-popup ref="pbPopup" mode="top">
	<template #header></template>
	<view class="content"></view>
	<template #footer></template>
</pb-popup>

this.$refs.pbPopup.show = true 

-->

<template>
	<view>
		<u-popup :show="show" :round="round" :mode="mode" :safeAreaInsetTop="safeAreaInsetTop" :closeOnClickOverlay="maskCloseAble"
			@open="open" @close="close" :bgColor="bgColor">
			<slot name="header"></slot>
			<view class="popup-content" :style="'max-height: '+contentMaxHeight+';'">
				<slot></slot>
			</view>
			<slot name="footer"></slot>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "pb-popup",
		props: {
			mode: {
				type: String,
				default: "bottom", //top / right / bottom / center
			},
			round: {
				type: [String, Number],
				default: "0"
			},
			contentMaxHeight: {
				type: String,
				default: "80vh"
			},
			maskCloseAble: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
			}
		},
		data() {
			return {
				show: false,
				safeAreaInsetTop: true,
			};
		},
		created() {
			if(this.mode == "top") {
				this.safeAreaInsetTop = true
			}else {
				this.safeAreaInsetTop = false
			}
		},
		beforeDestroy() {
			// #ifdef H5
			document.body.style.overflow = "auto"
			// #endif
		},
		watch: {
			show: {
				handler(e) {
					// #ifdef H5
					//使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。
					//但由于平台自身原因，除了h5平台外 ，其他平台都不能在在 组件内 禁止滚动穿透，
					//所以在微信小程序、App 平台，页面内需要用户特殊处理一下（<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>）
					//https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html#禁止滚动穿透
					document.body.style.overflow = e == true ? "hidden" : "auto"
					// #endif
				},
				deep: true
			}
		},
		methods: {
			close() {
				this.show = false
				this.$emit('close')
			},
			open() {
				this.show = true
				this.$emit('open')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		overflow-y: scroll;
	}
	/* #ifndef VUE3 */
	/deep/ .u-popup__content {
		overflow: hidden;
	}
	/* #endif */
	/* #ifdef VUE3 */
	:deep(.u-popup__content) {
		overflow: hidden;
	}
	/* #endif */
</style>